<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 节流是一段时间只执行一次   防抖是只执行最后一次-->
<!-- 如果搜索框输入查询是用节流的话，输入一个字之后会先去请求一次资源，而输入的这个字并不是自己最后输入的，浪费服务资源，所以要用防抖 -->
<!-- 防抖 -->
<!-- 主要应用场景有：
a、scroll事件滚动触发，
b、搜索框输入查询
c、表单验证
d、按钮提交事件
e、浏览器窗口缩放，resize事件 -->

<!-- 节流：节流是指如果持续触发某个事件，则每隔n秒执行一次。 -->
<!-- 主要应用场景：
a、DOM元素的拖拽功能实现
b、射击游戏类
c、计算鼠标移动的距离
d、监听scroll事件 -->
    <input type="text" oninput="fn()">


    <script>
        // 防抖的
         var  timer=null
        function  fn(){
             clearTimeout(this.timer)
           timer=setTimeout(()=>{
                console.log('进行防抖处理的输入框');
            },500)
        }
   
        // 未进行防抖的搜索
        // function fn(){
        //     console.log('未进行防抖处理的 输入框');
        // }
    </script>
</body>
</html>